<script setup lang="ts">
import { DemoPreview } from '@base-comp';
import { ref, Ref } from 'vue';
import { useLangStroe, pinia } from '@stores'
import { LocaleType } from '#types/local'
import { computed, unref } from 'vue'
import i18n from '@/lang'
import {LANGMAP} from '@/config'

const localStore = useLangStroe(pinia)
const currentLang = computed(() => localStore.getCurrentLang)

const changeLang = () => {
  let lang :LocaleType  = 'zh-CN'
  if (isEnglish.value) {
    lang = 'en'
  }
  // 判同
  if (lang === unref(currentLang).lang) return
  localStore.setLang({
    lang
  })
  const { locale } = i18n.global
  locale.value = lang as unknown as LANGMAP
}

const isEnglish = ref(false)

const code: Ref<string> = ref(`<script setup lang="ts">

import { ref, Ref } from 'vue';
import { useLangStroe, pinia } from '@stores'
import { LocaleType } from '#types/local'
import { computed, unref } from 'vue'
import i18n from '@/lang'
import {LANGMAP} from '@/config'

const localStore = useLangStroe(pinia)
const currentLang = computed(() => localStore.getCurrentLang)

const changeLang = () => {
  let lang :LocaleType  = 'zh-CN'
  if (isEnglish.value) {
    lang = 'en'
  }
  // 判同
  if (lang === unref(currentLang).lang) return
  localStore.setLang({
    lang
  })
  const { locale } = i18n.global
  locale.value = lang as unknown as LANGMAP
}

const isEnglish = ref(false)
<\/script>

<template>
  <el-switch
    v-model="isEnglish"
    active-text="英文"
    inactive-text="中文"
    @change="changeLang"
  />
</template>
`)
</script>
<template>
  <el-row>
    <el-row>
      多语言功能基于I18N实现，暂时由前端保存多语言信息，后期会走后端接口拿到文本。切换多语言功能见Demo1
    </el-row>
    <el-col :span="12" style="margin-top: 20px">
      DEMO1
      <DemoPreview :code="code">
        <el-switch
          v-model="isEnglish"
          active-text="英文"
          inactive-text="中文"
          @change="changeLang"
        />
      </DemoPreview>
    </el-col>
  </el-row>
</template>
<style lang="scss">
</style>